<template>
  <div class="padding flex height-100 content-with-tree">
    <div class="left-tree">
      <el-scrollbar style="height:100%;" wrap-style="overflow-x:hidden;">
        <el-tree
          class="padding"
          default-expand-all
          highlight-current
          :data="treeData"
          @node-click="onNodeClick"
        ></el-tree>
      </el-scrollbar>
    </div>
    <div class="flex direction-column height-100 right-content">
      <div class="search-form">
        <el-form inline>
          <el-form-item label="周期选择">
            <el-select v-model="type" style="width:100px;">
              <el-option :value="1" label="按年"></el-option>
              <el-option :value="2" label="按月"></el-option>
              <el-option :value="3" label="按日"></el-option>
            </el-select>
            <el-date-picker
              v-model="value" :type="pickerType"
              :format="pickerFormatter" :value-format="pickerFormatter"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getLists">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        ref="table"
        class="table" v-loading="loading" :data="lists" height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white'
        }"
        show-summary sum-text="合计："
      >
        <div slot="empty" class="empty-lists">
          <svg-icon name="search"></svg-icon>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.label" v-bind="column"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'statistics-of-energy-consumption-of-energy-using-units',
  data () {
    return {
      treeData: [
        {
          id: '1',
          label: '全厂',
          isLeaf: false,
          children: [
            {
              id: '1-1',
              label: '高压配电房',
              isLeaf: true
            },
            {
              id: '1-2',
              label: '皮带秤',
              isLeaf: true
            },
            {
              id: '1-3',
              label: '热力',
              isLeaf: true
            },
          ]
        }
      ],
      type: 1,
      value: this.$dayjs().format('YYYY'),
      loading: false,
      lists: [],
      columns: [
        { label: '日期', prop: 'col1' },
        { label: '其它原煤（吨）', prop: 'col2' },
        { label: '电力（千瓦时）', prop: 'col3' },
        { label: '综合能耗（吨标准煤）', prop: 'col4' },
      ],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    pickerType () {
      const { type } = this
      return type === 1
        ? 'year'
        : type === 2
          ? 'month'
          : 'date'
    },
    pickerFormatter () {
      const { type } = this
      return type === 1
        ? 'yyyy'
        : type === 2
          ? 'yyyy-MM'
          : 'yyyy-MM-dd'
    },
  },
  watch: {
    type (val) {
      const value = this.value || undefined
      const format = val === 1
        ? 'YYYY'
        : val === 2
          ? 'YYYY-MM'
          : 'YYYY-MM-DD'
      this.value = this.$dayjs(value).format(format)
    },
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading = false
          let{ type, value } = this
          value = value || this.$dayjs().format('YYYY-MM-DD')
          const obj = {
            1: 12,
            2: this.$dayjs(value).add(1, 'month').set('date', 0).get('date'),
            3: 24 * 4
          }
          const temp = obj[type]
          let ret = []
          if (type === 1) {
            ret = Array(temp).fill(1).map((v, i) => ({
              col1: ('' + (i + 1)).padStart(2, '0') + '月',
              col2: Math.round(Math.random() * 99 + 1),
              col3: Math.round(Math.random() * 99 + 1),
              col4: Math.round(Math.random() * 99 + 1),
            }))
          } else if (type === 2) {
            ret = Array(temp).fill(1).map((v, i) => ({
              col1: ('' + (i + 1)).padStart(2, '0') + '日',
              col2: Math.round(Math.random() * 99 + 1),
              col3: Math.round(Math.random() * 99 + 1),
              col4: Math.round(Math.random() * 99 + 1),
            }))
          } else if (type === 3) {
            ret = Array(temp).fill(1).map((v, i) => ({
              col1: ('' + Math.floor(i / 4)).padStart(2, '0') + ':' + ((15 * (i % 4)) + '').padStart(2, '0'),
              col2: Math.round(Math.random() * 99 + 1),
              col3: Math.round(Math.random() * 99 + 1),
              col4: Math.round(Math.random() * 99 + 1),
            }))
          }
          this.lists = ret
          this.$nextTick(() => {
            this.$refs.table.doLayout()
          })
        }, 500)
      })
    },
    onNodeClick (node) {
      this.$nextTick(() => {
        this.getLists()
      })
    },
  },
}
</script>
